<template>
  <div class="discovery-wrapper">
    <!-- 搜索框 -->
    <Form :model="formSearch" label-position="right" label-colon :label-width="80">
      <Row :gutter="10">
        <Col :xs="24" :sm="24" :md="12" :lg="6">
          <FormItem label="服务名称">
            <Input v-model="formSearch.serviceName" placeholder="请输入服务名称"/>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="12" :lg="6">
          <FormItem>
            <Button type="primary" @click="querySearch" shape="circle" icon="ios-search">查询</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>

    <!-- 表格数据 -->
    <Table :loading="loading" border ref="selection" :columns="columns" :data="tableData"></Table>

    <!-- 分页按钮 -->
    <div class="page-wrapper">
      <Page :total="tableData.length" @on-change="handlePage" show-elevator show-total/>
    </div>

    <!-- 查看服务日志信息 -->
    <div>
      <Modal
        v-model="logModel"
        ok-text="关闭"
        cancel-text="返回"
        fullscreen
        class="log-file"
      >
        <p slot="header" style="text-align:center">
          <span>{{logTitle}}</span>
        </p>
        <div class="log-box">
          <Input :border="false" :autosize="true" v-model="logFile" type="textarea" readonly/>
        </div>
      </Modal>
    </div>

    <!-- 加载等待 -->
    <Spin fix v-show="show">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>处理中...</div>
    </Spin>
  </div>
</template>

<script>
import {getService,logInfo} from '@/api/base'

export default {
  name: 'Discovery',
  data(){
    return {
      formSearch: {
        serviceName: ''
      },
      loading: false,
      tableData: [],
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '服务名称',
          key: 'serviceName',
          minWidth: 200
        },
        {
          title: '主机地址',
          key: 'host',
          minWidth: 150
        },
        {
          title: '端口',
          key: 'port',
          minWidth: 150
        },
        {
          title: '健康状态',
          key: 'secure',
          minWidth: 150,
          render: (h, params) => {
            return h('div', [
              h('Tag', {
                props: {
                  color: params.row.secure ? 'error' : 'success'
                }
              }, params.row.secure ? '异常' : '正常')
            ]);
          }
        },
        {
          title: '地址',
          key: 'uri',
          minWidth: 200
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 160,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.logModel = true
                    this.logTitle = params.row.serviceName + '.log'
                    this.getLogFileInfo(params.row.serviceName)
                  }
                }
              }, '查看日志'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$Message.warning('功能未开放')
                  }
                }
              }, '下线')
            ]);
          }
        }
      ],
      logModel: false,
      logTitle: '',
      logFile: '',
      show: false
    }
  },
  methods:{
    /**
     * 获取所有服务列表
     */
    getAllService(){
      this.loading = true
      getService({
        pageNum: 1,
        pageSize: 10,
        serviceName: this.serviceName
      }).then(res => {
        this.loading = false
        this.tableData = res.data.data
      }).catch(()=>{
        this.loading = false
      })
    },
    /**
     * 查询
     */
    querySearch(){
      this.loading = true
      getService({
        pageNum: 1,
        pageSize: 10,
        serviceName: this.formSearch.serviceName
      }).then(res => {
        this.loading = false
        this.tableData = res.data.data
      }).catch(()=>{
        this.loading = false
      })
    },
    /**
     * 处理分页
     */
    handlePage(pageNum){
      this.loading = true
      getService({
        pageNum: pageNum,
        pageSize: 10,
        serviceName: this.formSearch.serviceName
      }).then(res => {
        this.loading = false
        this.tableData = res.data.data
      }).catch(()=>{
        this.loading = false
      })
    },
    getLogFileInfo(serviceName){
      this.show = true
      logInfo(serviceName).then(res => {
        if(res.data.status){
          this.logFile = res.data.data
        }
        this.show = false
      }).catch(()=>{
        this.show = false
      })
    }
  },
  created(){
    this.getAllService()
  }
}
</script>

<style lang="less">
.discovery-wrapper{
  padding: 10px;
  .page-wrapper{
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
</style>

<style scoped>
.log-file >>> .ivu-modal-body{
  /* background-color: black;
  color: white; */
  padding: 0;
}

.log-box >>> textarea{
  background-color: black;
  color: #19ad25;
}

.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
</style>
